
import { computed, Ref, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAppStore } from "../../store/app";
import { useUserStore } from "../../store/user";
import { treeToList } from "../../library/treeUtil";

export function useTab() {

  const route = useRoute();
  const router = useRouter();
  const routes = router.getRoutes()
  const currentPath = computed(() => route.fullPath);
  const appStore = useAppStore();
  const userStore = useUserStore();
  const menus = computed(() => userStore.menus);
  // const tabs=ref<any>( appStore.tabs);
  const tabsCache: string[] = []

  if (routes) {
    //  
    // routes.forEach(route => {
    //   if (route.meta && route.meta.affix) {
    //    if(route.meta.requireAuth){

    //    }else{
    //  appStore.tabs.push({
    //       ...route.meta,
    //       id: route.path,
    //       name: route?.name
    //     })
    //     tabsCache.push(route.path)
    //    }
    //     const path = appStore.tabs.find((item:any) => item.id === route.path);
   
    //   }
    // })
  }

  if (route.fullPath && !tabsCache.includes(route.fullPath)) {
     
    const path = routes.find(item => item.path === route.fullPath);
    let t  =  appStore.tabs.find((item:any) => item.id === route.fullPath);
    if(!t){
      path&&appStore.tabs.push({
        ...path.meta,
        id: route.fullPath,
        name: route?.name,
      })
    }


 

  }

  const to = (id: string) => {
    router.push(id);
    refresh();
  };

  const close = (id: string) => {
    appStore.tabs = appStore.tabs.filter((ele: any) => ele.id != id);
    if (appStore.tabs.length == 0) {
      to(appStore.tabs[0].id);
    }else{
     let index= appStore.tabs.length-1;
     to(appStore.tabs[index].id);
       //refresh();
    }


  };

  const closeAll = () => {
    appStore.tabs = appStore.tabs.filter((ele: any) => ele.closable == false);
    to(appStore.tabs[0].id);
  };

  const closeCurrent = () => {
    appStore.tabs = appStore.tabs.filter((ele: any) => ele.id != currentPath.value);
    to(appStore.tabs[0].id);
  }

  const closeOther = () => {
    appStore.tabs = appStore.tabs.filter(
      (ele: any) => ele.closable == false || ele.id == currentPath.value
    );
  };

  watch(route, () => {
    let bool = false;
    appStore.tabs.forEach((tab: any) => {
      if (tab.id === route.fullPath) {
        bool = true;
      }
    });
     
    // if (!bool) {
    //   tabs.value.push({ id: route.fullPath, title: route.meta.title, name: route?.name });
    // }
    if (!bool) {
      // @ts-ignore
      var d = treeToList(menus.value);
      // @ts-ignore
      var dd = d.filter((ele) => ele.id == route.fullPath);
      var t = "" as string;
      if (dd.length > 0) {
        t = dd[0].title;
      }
      else {
        t = route.meta.title as string;
      }
      //优先获取配置的title
      if(route.query.tabname){
        try{
          t=decodeURIComponent(route.query.tabname +"");
        }catch(e){
          
        }
  
      }
      var u=route.fullPath;
      if(route.fullPath!="/login"){

        appStore.tabs.push({title:  t,name:t,id:u   });
        refresh();
      }

   
    }
    appStore.$patch((state) => {
      //console.log(tabs.value);
      state.keepAliveList = appStore.tabs.map((item: any) => item?.id).filter((item: any) => item)
    })
  });
  const refresh = () => {
    appStore.routerAlive = false
    setTimeout(function () {
      appStore.routerAlive = true
    }, 500)
  }
  return {
    to,
    close,
    closeAll,
    closeOther,
    closeCurrent,
    currentPath,
    refresh
  };
}
